<template>
    <el-card class="box-card" width="100%">
  <div slot="header" class="clearfix">
    <span>训练任务创建</span>
    <el-button style="float: right; padding: 1px 0; height: 35px; width: 55px" type="primary" @click="goBack()">返回</el-button>
  </div>
  <div class="forms">
    <el-form ref="detailData" :rules="rules" :model="detailData" label-width="100px" class="train-form">
      <el-form-item label="名称：" prop="name">
        <el-input v-model="detailData.name"></el-input>
      </el-form-item>
      <el-form-item label="版本：" prop="version">
        <el-input v-model="detailData.version"></el-input>
      </el-form-item>
      <el-form-item label="训练数据集：" prop="train_dataset_id">
        <el-select v-model="detailData.train_dataset_id" placeholder="请选择数据集" class="sel">
          <el-option
          v-for="item in datasetList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right">{{ item.creator }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="验证数据集：" prop="val_dataset_id">
        <el-select v-model="detailData.val_dataset_id" placeholder="请选择数据集" class="sel">
          <el-option
          v-for="item in datasetList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right">{{ item.creator }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模型：" prop="model_id">
        <el-select v-model="detailData.model_id" placeholder="请选择模型" class="sel">
          <el-option
          v-for="item in modelList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right">{{ item.creator }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="训练参数：" prop="train_args">
        <el-input v-model="detailData.train_args" type="textarea" :rows="5" maxlength=1000></el-input>
      </el-form-item>
      <el-form-item label="描述：" prop="description">
        <el-input v-model="detailData.description" type="textarea" :rows="5" maxlength=500></el-input>
      </el-form-item>
      <el-form-item label="GPU(个)：" prop="gpu_count">
        <el-input v-model="detailData.gpu_count"></el-input>
      </el-form-item>
      <el-form-item label="时间限制(h)：" prop="hours">
        <el-input v-model="detailData.hours"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createTrainjobProcess()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</el-card>
</template>
<style scoped>
  .forms {
    font-size: 16px;
    text-align: left;
    margin-left: 1px;
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }

  .el-card__header {
    padding: 18px 20px;
    background-color: rgb(238, 241, 246);
  }

  .train-form {
    width: 90%;
    margin: 10px; /* 上下间距160px，左右自动居中*/
    background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
    padding: 10px;
    border-radius: 20px; /* 圆角 */
  }

  .sel {
      width: 90%
  }
</style>
<script>
import { createTrainjob } from '@/api/request/trainjob'
import { getDatasetListAvailable } from '@/api/request/dataset'
import { getModelListAvailable } from '@/api/request/model'
// import store from '@/store/store'
export default {
//   props: ['title'],
  data () {
    return {
      detailData: {
        name: '',
        version: '',
        budget: '',
        gpu_count: '',
        hours: '',
        description: '',
        train_args: '',
        model_id: null,
        train_dataset_id: null,
        val_dataset_id: null
      },
      datasetList: [],
      modelList: []
    //   title: '我创建的数据集'
    }
  },
  methods: {
    update () {
      getModelListAvailable().then(response => {
        this.modelList = response
      })
      getDatasetListAvailable().then(response => {
        this.datasetList = response
      })
    },
    goBack () {
      this.clear()
      this.$router.go(-1)
    },
    createTrainjobProcess () {
      this.detailData.budget = JSON.stringify({GPU_COUNT: parseInt(this.detailData.gpu_count), HOURS: this.detailData.hours})
      this.detailData.version = parseInt(this.detailData.version)
      createTrainjob(this.detailData).then(response => {
        this.clear()
        this.$router.go(-1)
      })
    },
    clear () {
      this.detailData.budget = ''
      this.detailData.version = ''
      this.detailData.gpu_count = 0
      this.detailData.hours = 0.0
      this.detailData.name = ''
      this.detailData.train_dataset_id = ''
      this.detailData.val_dataset_id = ''
      this.detailData.model_id = ''
      this.detailData.train_args = ''
      this.detailData.description = ''
    }
  },
  activated () {
    this.update()
  }
}
</script>
